<template>
  <div v-loading="loading" element-loading-text="加载中...">
    <div class="btns flex-justify-end mt10">
      <HPlainButton @click="saveSet(formRef1, formRef2)">保存</HPlainButton>
    </div>
    <div class="code-set">
      <div class="form">
        <el-form :model="form" class="set" ref="formRef1" :rules="rules" label-width="110">
          <el-form-item label="编码规则" class="mb10 m_l2">
            <el-radio-group v-model="form.ruleType" class="badge-sel">
              <el-radio :value="1" class="check_xy">
                <div class="text_xy">数字+字母组合</div>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="flex-align-center checkboxs mb10">
            <el-form-item label="编码规格前缀" prop="codePrefix">
              <el-input
                v-model="form.codePrefix"
                class="input_code"
                clearable
                maxlength="2"
                placeholder="前缀名称"
              />
            </el-form-item>
            <el-form-item label=" " class="checkbox-item" prop="codeRule">
              <el-checkbox-group v-model="form.codeRule">
                <el-checkbox value="1">六位产品生产日期</el-checkbox>
                <el-checkbox value="2">八位防伪码</el-checkbox>
                <el-checkbox value="3">六位随机防窜码</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
          <div class="flex-align-center checkboxs mb10">
            <el-form-item label="临时规格前缀" prop="temporaryPrefix">
              <el-input
                v-model="form.temporaryPrefix"
                class="input_code"
                maxlength="2"
                clearable
                placeholder="前缀名称"
              />
            </el-form-item>
            <el-form-item label=" " class="checkbox-item" prop="temporRule">
              <el-checkbox-group v-model="form.temporRule">
                <el-checkbox value="1">六位产品生产日期</el-checkbox>
                <el-checkbox value="2">八位防伪码</el-checkbox>
                <el-checkbox value="3">六位随机防窜码</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
          <div class="flex-align-center checkboxs mb10">
            <el-form-item label="仓储编码前缀" prop="storehousePrefix">
              <el-input
                v-model="form.storehousePrefix"
                class="input_code"
                maxlength="2"
                clearable
                placeholder="前缀名称"
              />
            </el-form-item>
            <el-form-item label=" " class="checkbox-item" prop="storehouseRule">
              <el-checkbox-group v-model="form.storehouseRule">
                <el-checkbox value="1">六位产品生产日期</el-checkbox>
                <el-checkbox value="2">八位防伪码</el-checkbox>
                <el-checkbox value="3">六位随机防窜码</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
        </el-form>
        <el-form :model="form" class="set" :rules="rules" label-width="80" ref="formRef2">
          <el-form-item label="编码导入" class="mb18 m_l2">
            <el-radio-group v-model="form.enableImport" class="badge-sel">
              <el-radio :value="true" class="check_xy">
                <div class="text_xy">启用</div>
              </el-radio>
              <el-radio :value="false" class="check_xy">
                <div class="text_xy">禁用</div>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="仓储编码" class="mb18 m_l2">
            <el-radio-group v-model="form.enableStorehouseCode" class="badge-sel">
              <el-radio :value="true" class="check_xy">
                <div class="text_xy">启用</div>
              </el-radio>
              <el-radio :value="false" class="check_xy">
                <div class="text_xy">禁用</div>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="批次前缀" class="mb18" prop="batchPrefix">
            <el-input
              v-model="form.batchPrefix"
              class="input_code_lang"
              clearable
              maxlength="2"
              placeholder="前缀名称"
            />
          </el-form-item>
          <el-form-item label="导入前缀" class="mb18" prop="importPrefix">
            <el-input
              v-model="form.importPrefix"
              class="input_code_lang"
              clearable
              maxlength="2"
              placeholder="前缀名称"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, markRaw } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Warning } from '@element-plus/icons-vue'
  import type { FormInstance } from 'element-plus'
  import { getCodeSet, saveCodeSet } from '../../../../../../../api/basic'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'

  const loading = ref(false)
  const props = defineProps({
    active_name: String,
  })

  const form = reactive({
    id: null,
    ruleType: 1,
    codePrefix: '',
    codeRule: [],
    temporaryPrefix: '',
    temporRule: [],
    enableStorehouseCode: true,
    storehousePrefix: '',
    storehouseRule: [],
    enableImport: true,
    importPrefix: '',
    batchPrefix: '',
  })

  // 表单元素
  const formRef1 = ref<FormInstance>()
  const formRef2 = ref<FormInstance>()

  // 验证规则
  const rules = reactive({
    codePrefix: [
      { required: true, message: '请输入前缀', trigger: 'blur' },
      {
        pattern: /^[A-Za-z1-9]{1,2}$/,
        message: '格式错误',
        trigger: 'blur',
      },
    ],
    codeRule: [
      { required: true, message: '请选择组合类型', trigger: 'blur' },
      {
        validator: (rule: any, value: string, callback: any) => {
          if (form.codeRule.length < 2) {
            callback(new Error('至少选择两种组合类型'))
          } else {
            callback()
          }
        },
        trigger: 'change',
      },
    ],
    temporaryPrefix: [
      { required: true, message: '请输入前缀', trigger: 'blur' },
      {
        pattern: /^[A-Za-z1-9]{1,2}$/,
        message: '格式错误',
        trigger: 'blur',
      },
    ],
    temporRule: [
      { required: true, message: '请选择组合类型', trigger: 'blur' },
      {
        validator: (rule: any, value: string, callback: any) => {
          if (form.temporRule.length < 2) {
            callback(new Error('至少选择两种组合类型'))
          } else {
            callback()
          }
        },
        trigger: 'change',
      },
    ],
    storehousePrefix: [
      { required: true, message: '请输入前缀', trigger: 'blur' },
      {
        pattern: /^[A-Za-z1-9]{1,2}$/,
        message: '格式错误',
        trigger: 'blur',
      },
    ],
    storehouseRule: [
      { required: true, message: '请选择组合类型', trigger: 'blur' },
      {
        validator: (rule: any, value: string, callback: any) => {
          if (form.storehouseRule.length < 2) {
            callback(new Error('至少选择两种组合类型'))
          } else {
            callback()
          }
        },
        trigger: 'change',
      },
    ],
    batchPrefix: [
      { required: true, message: '请输入前缀', trigger: 'blur' },
      {
        pattern: /^[A-Za-z1-9]{1,2}$/,
        message: '格式错误',
        trigger: 'blur',
      },
    ],
    importPrefix: [
      { required: true, message: '请输入前缀', trigger: 'blur' },
      {
        pattern: /^[A-Za-z1-9]{1,2}$/,
        message: '格式错误',
        trigger: 'blur',
      },
    ],
  })

  onMounted(() => {
    if (props.active_name == 'first') {
      getSet()
    }
  })

  // 获取编码设置
  const getSet = async () => {
    loading.value = true
    await getCodeSet().then((res) => {
      form.id = res.data.data.row.id
      form.ruleType = res.data.data.row.ruleType
      form.codePrefix = res.data.data.row.codePrefix
      form.codeRule = res.data.data.row.codeRule.split(',')
      form.temporaryPrefix = res.data.data.row.temporaryPrefix
      form.temporRule = res.data.data.row.temporRule.split(',')
      form.enableStorehouseCode = res.data.data.row.enableStorehouseCode
      form.storehousePrefix = res.data.data.row.storehousePrefix
      form.storehouseRule = res.data.data.row.storehouseRule.split(',')
      form.enableImport = res.data.data.row.enableImport
      form.importPrefix = res.data.data.row.importPrefix
      form.batchPrefix = res.data.data.row.batchPrefix
    })
    loading.value = false
  }

  // 保存编码设置
  const saveSet = (formEl: FormInstance | undefined, formEl2: FormInstance | undefined) => {
    formEl.validate((valid) => {
      if (valid) {
        formEl2.validate((valid2) => {
          if (valid2) {
            const data = {
              batchPrefix: form.batchPrefix,
              codePrefix: form.codePrefix,
              codeRule: form.codeRule.join(),
              enableImport: form.enableImport,
              enableStorehouseCode: form.enableStorehouseCode,
              id: form.id,
              importPrefix: form.importPrefix,
              ruleType: form.ruleType,
              storehousePrefix: form.storehousePrefix,
              storehouseRule: form.storehouseRule.join(),
              temporRule: form.temporRule.join(),
              temporaryPrefix: form.temporaryPrefix,
            }
            ElMessageBox({
              type: 'warning',
              title: '提示',
              icon: markRaw(Warning),
              message: `确认保存修改的设置?`,
              showCancelButton: true,
              closeOnClickModal: false,
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              beforeClose: (action, instance, done) => {
                if (action === 'confirm') {
                  instance.confirmButtonLoading = true
                  instance.confirmButtonText = '加载中...'
                  setTimeout(() => {
                    done()
                    setTimeout(() => {
                      instance.confirmButtonLoading = false
                    }, 0)
                  }, 1000)
                } else {
                  done()
                }
              },
            }).then(async () => {
              await saveCodeSet(data).then((res) => {
                if (res.data.success) {
                  ElMessage({
                    message: res.data.message,
                    type: 'success',
                    duration: 2000,
                  })
                } else {
                  if(res.data.isError)
                  ElMessage({
                    message: res.data.message,
                    type: 'warning',
                    duration: 2000,
                  })
                }
              })
              getSet()
            })
          } else {
            return
          }
        })
      } else {
        return
      }
    })
  }

  // 返回方法
  defineExpose({ getSet })
</script>

<style scoped lang="scss">
  @import '../../base/index.scss';
</style>
